<template>
  <el-row :gutter="20" class="struct-extract">
    <el-col :span="10" class="col-wrap">
      <MapConfig :columns="columns" class="struct-config" />
    </el-col>
    <el-col :span="14" class="col-wrap">
      <div class="file-content" ref="fileContentRef">
        <div class="table-title">
          <span class="table-title-text">内容预览</span>
          <div class="table-opera">
            <el-button type="primary" size="small" @click="$router.go(-1)"
              >返回</el-button
            >
          </div>
        </div>
        <el-table
          class="file-table"
          :data="fileInfoList"
          size="medium"
          v-loading="loading"
          :key="refreshKey"
          :maxHeight="maxHeight"
          :header-cell-style="{
            background: '#F3F4F8',
            color: '#000000',
          }"
          :cell-style="{ color: '#333333' }"
        >
          <!-- <el-table-column
            type="index"
            prop="id"
            label="序号"
            width="100"
            align="center"
          ></el-table-column> -->
          <el-table-column
            v-for="(c, idx) in columns"
            :key="idx"
            :prop="c"
            :label="c"
            min-width="200"
            align="center"
            show-overflow-tooltip
            :render-header="renderHeader"
          ></el-table-column>
        </el-table>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import MapConfig from "./components/MapConfig.vue";
export default {
  name: "StructExtract",
  components: {
    MapConfig,
  },
  data() {
    return {
      // 表格数据加载
      loading: false,
      columns: [],
      fileInfoList: [],
      maxHeight: 0,
      refreshKey: 0,
    };
  },
  created() {
    this.getFileInfo();
  },
  mounted() {
    this.calcMaxHeight();
  },
  methods: {
    getFileInfo() {
      this.$api.knowledgeGeneration
        .getStructExtractFile({
          sourceDataFileId: this.$route.query.fileId,
        })
        .then((res) => {
          const { data, message, code } = res.data;
          if (code === 200) {
            this.columns = data.headerNameList;
            this.fileInfoList = data.valueList;
          } else {
            this.$message.warning(message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    renderHeader(h, data) {
      return h("span", [
        h(
          "el-tooltip",
          {
            attrs: {
              content: data.column.label,
              placement: "top",
            },
          },
          [h("span", data.column.label)]
        ),
      ]);
    },
    calcMaxHeight() {
      this.maxHeight = this.$refs.fileContentRef.clientHeight - 100;
      this.refreshKey++;
    },
  },
};
</script>
<style lang="scss" scoped>
.struct-extract {
  position: relative;
  height: 100%;
  padding-bottom: 24px;
  box-sizing: border-box;
}

.col-wrap {
  height: 100%;
}

.struct-config,
.file-content {
  height: 100%;
  padding: 20px;
  background-color: #fff;
  box-sizing: border-box;
}

.table-title {
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .table-title-text {
    border-left: 5px solid #4b71eb;
    padding-left: 10px;
    font-size: 16px;
    line-height: 16px;
  }

  margin-bottom: 10px;
}

.file-table ::v-deep th.el-table__cell > .cell {
  word-break: keep-all;
  white-space: nowrap;
}
</style>
